<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="../lib/react.js"></script>
  <script src="../lib/react-dom.js"></script>
  <script src="../lib/browser.min.js"></script>
</head>
<body>
  <div id="example"></div>
  <script type="text/babel">
    var names = ['Alice', 'Emily', 'Kate'];
    
    // JSX：遇到HTML标签('<')，就以HTML解析，遇到代码块('{')就以JS解析（调用函数）
    ReactDOM.render(
      <div>
      {
        // names.map(function (name, index) {
        //   return <div key={index}>Hello, {name}!</div>
        // })
        output()
      }
      </div>,
      document.getElementById('example')
    );

    // 要调用的函数
    function output() {
      var t=[];
      for (var i=0;i<names.length; i++) {
        t.push(<p key={i}>Hello, {names[i]}</p>)
      }
      return t;
    }
  </script>
</body>
</html>